<template>
  <div class="mall">
    <ul class="mall-list">
      <li
        v-for="mallList in mallLists"
        :key="mallList.id"
        is="router-link"
        tag="li"
        :to="{ name: 'MallSort', params: { id: mallList.id } }"
      >
        {{ mallList.name }}
      </li>
    </ul>
    <div class="mall-right">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: "Mall",
  data() {
    return {
      mallLists: []
    };
  },
  created() {
    this.$http
      .getMall()
      .then(resp => {
        // console.log(resp);
        this.mallLists = resp.list.slice(1);
      })
      .then(() => {
        if (!this.$route.params.id) {
          // console.log(555);
          this.$router.push({
            name: "MallSort",
            params: {
              id: this.mallLists[0].id
            }
          });
        }
      });
  }
};
</script>

<style lang="scss" scoped>
.mall {
  width: 100%;
  height: 100%;
  display: flex;
  .mall-list {
    width: 100px;
    background: #fff;
    overflow: auto;
    li {
      height: 50px;
      line-height: 50px;
      overflow: hidden;
      color: rgb(49, 164, 252);
      padding-left: 20px;
    }
  }
  .mall-right {
    flex: 1;
    height: 100%;
    overflow: auto;
  }
  .router-link-exact-active .router-link-active {
    background: #f2f2f2;
    border-left: 3px solid rgb(49, 164, 252);
  }
}
</style>
